如何在Axios拦截器中处理错误?

来源:博客站 01月23日 14:26

在Axios中,拦截器提供了一种机制来在请求或响应被处理之前拦截它们。你可以使用拦截器来添加认证头、处理错误、显示加载动画等。在处理错误时,你可以使用响应拦截器来捕获并处理从服务器返回的错误。

以下是一个示例,展示了如何在Axios中设置拦截器来处理错误:

  1. 安装Axios(如果尚未安装):

    npm install axios
    
  2. 设置Axios实例和拦截器

    import axios from 'axios';
    
    // 创建一个Axios实例
    const axiosInstance = axios.create({
        baseURL: 'https://api.example.com', // 替换为你的API基础URL
        timeout: 10000, // 请求超时时间
    });
    
    // 请求拦截器
    axiosInstance.interceptors.request.use(
        config => {
            // 在发送请求之前做些什么,例如添加认证头
            // config.headers['Authorization'] = 'Bearer ' + token;
            return config;
        },
        error => {
            // 对请求错误做些什么
            return Promise.reject(error);
        }
    );
    
    // 响应拦截器
    axiosInstance.interceptors.response.use(
        response => {
            // 对响应数据做点什么
            return response;
        },
        error => {
            // 对响应错误做点什么
            if (error.response) {
                // 服务器返回了一个状态码,并且状态码触发了错误
                switch (error.response.status) {
                    case 400:
                        console.error('Bad Request');
                        break;
                    case 401:
                        console.error('Unauthorized');
                        // 可以在这里处理未授权,例如重定向到登录页面
                        break;
                    case 403:
                        console.error('Forbidden');
                        break;
                    case 404:
                        console.error('Not Found');
                        break;
                    case 500:
                        console.error('Internal Server Error');
                        break;
                    default:
                        console.error('An unknown error occurred:', error.response.status);
                }
            } else if (error.request) {
                // 请求已经发出,但没有收到响应
                console.error('No response received:', error.request);
            } else {
                // 在设置请求时发生了错误
                console.error('Error in setting up request:', error.message);
            }
            // 返回一个Promise.reject()以便后续的错误处理
            return Promise.reject(error);
        }
    );
    
    // 导出Axios实例
    export default axiosInstance;
    
  3. 在你的应用中使用Axios实例

    import axiosInstance from './path/to/your/axiosInstance';
    
    axiosInstance.get('/some-endpoint')
        .then(response => {
            console.log('Response:', response.data);
        })
        .catch(error => {
            console.error('Error caught in the calling code:', error);
        });
    

在上面的示例中,我们创建了一个Axios实例,并添加了请求和响应拦截器。在响应拦截器中,我们检查错误对象的状态码,并根据不同的状态码执行不同的错误处理逻辑。这样,你可以集中管理错误处理逻辑,而无需在每个请求中都重复编写相同的错误处理代码。

原文出处: 内容源于AI仅供参考,请勿使用于商业用途。如若转载请注明原文及出处。
出处地址:http://www.07sucai.com/tech/259.html
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。

今日推荐

js中操作对象的方法有哪些?
如何做一名优秀的web安全工程师
网站如何禁止用户通过F12访问开发者工具?
非关系型数据库有哪些?
为什么服务器显示403错误,如何解决?
如何处理JavaScript中的异常?
JavaScript 如何实现一个类,怎么实例化这个类?
JavaScript变量声明提升详解